


import React, { Component } from 'react';
import {observer , inject } from 'mobx-react'


import data from '../data'
import user from '../user';


// @inject('data','user')
// @observer

class Counter extends Component {
    render() {
        console.log(this)
        const {
            count,
            city, 
            word,
            test,
            mv,
            newCount,
            countAdd,
            countDesc,
            changeCount,
            changeCity,
            changeWord,
            changeTest,
            getMvList,
            changeNewCount
        } = this.props.data   // data  

        const {
            userInfo,
            changeUserInfo ,
            setUserInfo
            } = this.props.user   // user 
            
        return (
            <div>
                <h2>
                    mbox 实现简易的 计数器 
                </h2>
                <h2>count  -- {count}</h2>
                <h2>newCount -- {newCount} </h2>
                <h2>city --- {city} </h2>
                <h2>word == {word }</h2>
                <h2>test  -- {test} </h2>
                <div>
                    <p>用户名: {userInfo&&userInfo.username} </p>
                    <p>手机号: {userInfo&&userInfo.phone} </p>
                    <p>昵称: {userInfo&&userInfo.nickname} </p>
                </div>
                <button onClick={()=>changeUserInfo({
                    username:"zlkl",
                    phone:18012341234,
                    nickname:'左帅'
                })}>登录</button>

                <button onClick={()=>changeUserInfo(null)}>退出登录</button>
                <button onClick={()=>setUserInfo({nickname:'左老师'})}>修改用户信息1</button>
                <button onClick={()=>changeUserInfo({...userInfo,nickname:'左老师2222222'})}>修改用户信息2</button>

                <hr/>

                <button onClick={countAdd} >count Add  </button>
                <button onClick={countDesc} >count Desc   </button>
                <button onClick={()=>changeCount(100)} >changeCount   </button>
                <button onClick={()=>changeNewCount(19000)}  >点击修改 New Count </button>
                <p>
                    <button  onClick={()=>changeCity('漂亮的京山 ')}> 漂亮的京山老乡  </button>
                </p>
                <p>
                    <input type="text" value={word}  ref={el=>this.text=el}  onChange={()=>changeWord(this.text.value )} />
                </p>
                <p>
                    <button onClick={changeTest}>修改 test </button>
                    <button onClick={getMvList} >获取 mv</button>
                </p>
                {
                    mv.map((l,i)=>(
                        <p key={i}>
                            {l.title} 
                        </p>
                    ))
                }
            </div>
        );
    }
}

// export default Counter 
// export default observer(Counter);   // 订阅组件内部的mobx 数据  每当mobx 改变 就回去重新刷新组件视图 

// export default observer(inject('data','user')(Counter))  error 
export default  inject('data','user')(observer(Counter)) 

// @connect() CPT
// connect(a,b)(CPT)